import React, { useState, useRef,useEffect } from "react";
import { Modal, Input, Form, Button } from "antd";
import axios from 'axios';

const ModifyUserMessage = (props) => {
  const [visible, setVisible] = useState(false);
  const [form] = Form.useForm();
  const userIdRef = useRef(0); // 使用 useRef 创建一个 ref 来存储 userID

  useEffect(() => {
    // 当用户信息发生变化时，更新表单字段值
    form.setFieldsValue({
      userName: props.user.userName,
      password: props.user.password,
      phone:props.user.phone,
      realname: props.user.name,
      identify: props.user.identify,
      roleId: props.user.roleID,
    });
    // 更新当前用户ID
    userIdRef.current = props.user.userId;
  }, [props.user,form]); // 当 props.user 发生变化时执行

  const openModal = (userID) => {
    userIdRef.current = userID; // 设置 userID 到 userIdRef 中
    setVisible(true);
  };
  const closeModal = () => {
    setVisible(false);
  };

  //发送修改用户信息，传递需要修改的内容
  const handleChange2 = () => {
    console.log("hl");
    console.log(form.getFieldsValue());
    console.log(localStorage.getItem("token"));
    const userID = parseInt(userIdRef.current);
    console.log(typeof(userID))
    axios.post("http://192.168.61.84:8086/v1/user/updateuser",
  {
      user_id: userID, // 使用 ref 获取 userID
      user_name: form.getFieldsValue().userName,
      phone: form.getFieldsValue().phone,
    },{
      headers:{
        x_token:localStorage.getItem("token")
      }
    })
      .then(res => {
        console.log(res);
        if (res.status === 200) {
          alert("修改成功");
        }
        // 这里可以处理响应，例如显示成功消息或更新页面
      })
      .catch(error => {
        console.error(error);
        // 这里可以处理错误，例如显示错误消息
      });
  };

  return (
    <>
      <button style={{ width: 70, height: 40 }} onClick={() => openModal(props.userID)}>
        修改
      </button>
      <Modal
        title="修改用户信息"
        visible={visible}
        onCancel={closeModal} // 关联关闭按钮的事件处理函数
        afterClose={closeModal}
        footer={null} // 移除默认的按钮
      >
        <Form form={form}>
          <div className="form-wrapper">
            当前用户ID: <span>{userIdRef.current}</span> {/* 使用 ref 显示 userID */}
            <Form.Item
              label="用户名"
              name="userName"
              rules={[
                {
                  required: true,
                  message: "请输入修改用户名!",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="手机号"
              name="phone"
              rules={[
                {
                  required: true,
                  message: "请输入修改手机号！",
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="角色id"
              name="roleId"
              rules={[
                {
                  required: true,
                  message: "请输入角色id!",
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Button type="primary" onClick={handleChange2} style={{ marginRight: 10, width: 80 }}>
              提交修改
            </Button>
            <Button onClick={closeModal} style={{ width: 80 }}>取消</Button>
          </div>
        </Form>
      </Modal>
    </>
  );
};

export default ModifyUserMessage;
